<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :on-preview="preview"
      :on-remove="onRemove"
      :on-change="onChange"
      :http-request="upload"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :class="{ disabled: fileList.length > 0 }"
    >
      <i class="el-icon-plus" />
      <!-- 1 -->
    </el-upload>
    <!-- 进度条 -->
    <el-progress
      v-if="showPercentage"
      :percentage="percentage"
      style="width: 200px"
    />

    <el-dialog title="预览" :visible="showDialog" @close="close">
      <el-row type="flex" justify="center">
        <img :src="imgurl" alt="" />
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// import COS from "cos-js-sdk-v5";
// const cos = new COS({
//   SecretId: "AKIDLWchYAXfgbSAettd8NMDuMYT7nGYjoiO",
//   SecretKey: "UjiWCk47tPfgSxCDzWosiJekaAdx2rTs",
// });
export default {
  data() {
    return {
      percentage: 0,
      showPercentage: false,
      imgurl: "",
      showDialog: false,
      fileList: [],
    };
  },
  methods: {
    // 浏览
    preview(data) {
      //   console.log(data)
      this.showDialog = true;
      this.imgurl = data.url;
    },
    close() {
      this.showDialog = false;
    },
    // 删除
    onRemove(file, fileList) {
      this.fileList = [...fileList];
    },
    // 修改
    onChange(file, fileList) {
      this.fileList = [...fileList];
    },
    // 上传之前
    beforeUpload(file) {
      // 图片格式白名单
      const imgType = ["image/jpeg", "image/jpg", "image/png"];
      // 判断图片格式
      if (!imgType.includes(file.type)) {
        this.$message.error("图片只支持jpeg,jpg,png格式");
        return false;
      }
      // 设置图片最大内存
      const max = 1024 * 1024 * 2;
      // 判断图片大小
      if (file.size > max) {
        this.$message.error("图片不能大于2M");
        return false;
      }
      // this.$message.success('上传成功')
    },
    // 上传功能
    upload(data) {
      console.log("data", data);

      // 显示进度条
      this.showPercentage = true;

      // cos.putObject(
      //   {
      //     // 存储桶名称
      //     Bucket: "webtp-1306249748" /* 必须 */,
      //     // 地区
      //     Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
      //     // 存储文件名
      //     Key: data.file.name /* 必须 */,
      //     // 默认写死不改的标准储存标识
      //     StorageClass: "STANDARD",
      //     // 上传文件对象
      //     Body: data.file,
      //     // 进度发生改变的会掉
      //     onProgress: (progressData) => {
      //       //   console.log(progressData)
      //       // 进度条加载过程
      //       this.percentage = progressData.percent * 100;
      //     },
      //   },
      //   (err, data) => {
      //     // 这里第二个参数是回调结束时的参数
      //     console.log(err || data);
      //     if (!err) {
      //       //   console.log(data)

      //       console.log(this.fileList);
      //       // 将腾讯云的地址复制给饿了么
      //       this.fileList[0].url = "http://" + data.Location;
      //       // 显示图片状态
      //       this.fileList[0].status = "success";
      //       // 延迟进度条显示结束
      //       setTimeout(() => {
      //         this.showPercentage = false;
      //       }, 1000);
      //     }
      //   }
      // );
    },
  },
};
</script>

<style lang="less" scoped>
.disabled {
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
</style>
